<script setup lang="ts">
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
import { getTopPlaylistAPI } from '@/apis/music';
import { musicPlaylist,Subscriber,RootObject,Track,Privilege } from '@/types/playList.uts'
import {userUseStoreId} from '@/stores/musicStore.uts'
// import {userUseStoreId} from '@/stores/musicStore.uts'
	 const userStore=userUseStoreId()
const playlistData = ref<musicPlaylist[]>([]) as any;

	//引入组件
	const songList = ref<Track[]>([]);
	//播放全部id
	const privileges=ref<Privilege[]>([])
	//index
	const songIndex=ref<number>(0)
	const activeIndex=ref<number>(0)
	//播放按钮
	const activeList=ref<any>([
		{id:1,name:'下载'},
		{id:2,name:'收藏'},
		{id:3,name:'评论'},
		])
//播放按钮
	//点击底部播放
		function onPlayerBar(){
			const url = userStore.url ? userStore.url : '/subPagesMusic/MusicHeader/index';
			uni.navigateTo({
				url:url
			})
		}
	//返回按钮
	function goBack(){}
	//点击播放歌曲
	function onSong(id:number,index:number){
		 userStore.name=playlistData.value.tracks[index].name
		 userStore.artist=playlistData.value.tracks[index].al.name
		const ids:any= privileges.value.map((item)=>{
					return item.id
				}).join(',')
				const dataId=ids.split(',')
				
		uni.navigateTo({
			url:`/subPagesMusic/MusicHeader/index?id=${id}`
		})
		songIndex.value=index
		console.log(dataId);
		// uni.navigateTo({
		// 	url:`/subPagesMusic/MusicHeader/index?id=${id}`
		// })
		  
		// uni.navigateTo({
		// 			url:`http://music.163.com/song/media/outer/url?id=${id}.mp3`
		// 		})
	}
	//播放全部
	function onAllPlay(){
		const ids:any= privileges.value.map((item)=>{
			return item.id
		}).join(',')
		
		uni.navigateTo({
			url:`/subPagesMusic/MusicHeader/index?id=${ids}`
		})
		
	}
	//点击播放按钮
	function onActive(index:number){
		activeIndex.value=index
	}
 onLoad( async(options)=>{
	 const id:any=options.id
	 const res:RootObject= await getTopPlaylistAPI(id) as RootObject;
	 playlistData.value = res?.playlist;
	 privileges.value = res?.privileges
	 userUseStoreId().id=id
	   console.log('palay',res)
	  
 })

</script>


<template>
	
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-left">
        <image class="nav-icon" mode="aspectFit"/>
      </view>
      <view class="nav-right">
        <image class="nav-icon" src="/static/icon-share.png" mode="aspectFit"/>
      </view>
    </view>

    <!-- 背景图 -->
    <image 
      class="bg-image"
    :src="playlistData.backgroundCoverUrl" 
      mode="aspectFill"
    />
    <view class="bg-mask">

    <!-- 歌单信息 -->
    <view class="playlist-info">
      <image 
        class="playlist-cover"
        :src="playlistData?.coverImgUrl"
        mode="aspectFill"
      />
      <view class="info-right">
        <text class="playlist-title" style="color: #333;">{{playlistData?.detailPageTitle}}</text>
        <view class="creator-info">
          <image 
            class="creator-avatar"
            src="/static/avatar.jpg"
          />
          <view class="creator-name" style="color: #333;">
			  <text class="name">{{playlistData?.name}}</text>
		  </view>
          <image class="vip-icon" src="/static/icon-vip.png"/>
        </view>
        <view class="meta-info">
          <text class="play-count" style="color: #333;">播放量：{{playlistData?.playCount}}</text>
          <text class="divider" style="color: #333;">|</text>
          <text class="song-count" style="color: #333;">共{{privileges.length}}首</text>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <view class="button-item " v-for="(item,index) in activeList" :key="item.id" :class="{highlight:index===activeIndex}" @click="onActive(index)">
        <image class="btn-icon" src="/static/icon-download.png"/>
        <text>{{item.name}}</text>
      </view>
    </view>

    <!-- 歌曲列表 -->
    <scroll-view class="song-list" direction="vertical" :show-scrollbar="false"  scroll-y >
      <view class="list-header">
        <view class="play-all" @click="onAllPlay">
          <image class="play-icon" src="/static/images/music/play_icon.png"/>
          <text>播放全部</text>
          <text class="song-count">({{privileges?.length}})</text>
        </view>
        <view class="manage-btn">
          <image class="manage-icon" src="/static/icon-download.png"/>
          <text>管理</text>
        </view>
      </view>
      
      <view class="song-item" @click="onSong(item.id,index)" v-for="(item, index) in playlistData.tracks" :key="item.id" >
        <text class="song-index">{{ index + 1 }}</text>
        <view class="song-info">
          <text class="song-name">{{ item.name }}</text>
          <text class="singer">{{ item.singer }}</text>
        </view>
        <image class="mv-icon" src="/static/icon-mv.png"/>
        <text class="song-duration">{{ item.duration }}</text>
        <image class="more-icon" src="/static/icon-more.png"/>
      </view>
    </scroll-view>

    <!-- 播放控制栏 -->
	<!-- 底部播放控制栏 -->
	<view class="player-bar" @click="onPlayerBar">
				<image class="song-cover" src="/static/images/tabbar/music_normal.png" />
				<view class="song-info">
					<text class="song-title">{{userStore.name}}</text>
					<text class="singer">{{userStore.artist}}</text>
				</view>
				<text class="iconfont icon-play" style="color: #333;">▶</text>
				<text class="iconfont icon-list" style="color: #333;">█</text>
			</view>
  </view>
</view>
</template>

<style scoped lang="scss">
@import "index.scss"
</style>